<template>
  <div>
    <el-divider>项目基本信息</el-divider>
    <el-form-item>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="不动产类型" label-width="100px" prop="projectId">
            <el-select v-model="reportCommonObj.projectId" style="width: 100%" disabled>
              <el-option v-for="item in noPageProjectList" :key="item.id" :value="item.id" :label="item.projectName" />
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="项目ID">-->
        <!--            <el-input v-model="reportCommonObj.id" disabled />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="6">
          <el-form-item label="项目名称" label-width="90px" prop="reportName">
            <el-input v-model="reportCommonObj.reportName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报告编号" prop="reportId">
            <el-input v-model="reportCommonObj.reportId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报告类型" prop="reportTypeId">
            <el-select v-model="reportCommonObj.reportTypeId" style="width: 100%" :disabled="true">
              <el-option v-for="item in noPageReportTypeList" :key="item.id" :value="item.id" :label="item.reportTypeName" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="用途" prop="reportUseId">
            <el-select v-model="reportCommonObj.reportUseId" style="width: 100%">
              <el-option v-for="item in noPageReportUseList" :key="item.id" :value="item.id" :label="item.reportUseName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="估价时点" prop="reportEvaluateTime">
            <el-date-picker
              v-model="reportCommonObj.reportEvaluateTime"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
              @change="valueTimeChangeHandler"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="估价目的" label-width="90px" prop="reportObjectiveId">
            <el-select v-model="reportCommonObj.reportObjectiveId" style="width: 100%">
              <el-option v-for="item in noPageReportObjectiveList" :key="item.id" :value="item.id" :label="item.reportObjectiveName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="估价总值">
            <el-input v-model="reportCommonObj.reportTotalValue">
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="坐落" label-width="90px" prop="beLocated">
            <el-input v-model="reportCommonObj.beLocated" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地级" label-width="90px" prop="prefectureLevelCities">
            <el-select v-model="reportCommonObj.prefectureLevelCities" clearable filterable style="width: 100%" @change="selectArea" @clear="resetArea">
              <el-option
                v-for="item in noPageReportPrefectureLeveLciTies"
                :key="item.prefectureLevelCitiesName"
                :label="item.prefectureLevelCitiesName"
                :value="item.prefectureLevelCitiesName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区域" label-width="90px" prop="area">
            <el-select v-model="reportCommonObj.area" clearable filterable style="width: 100%">
              <el-option
                v-for="item in noPageReportAreas"
                :key="item.areaName"
                :label="item.areaName"
                :value="item.areaName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标准收费" prop="chargeGist">
            <el-input v-model="reportCommonObj.standardCharge">
              <el-select slot="prepend" v-model="reportCommonObj.chargeGist" placeholder="请选择" style="width: 90px" @change="calculatePayHandler">
                <el-option label="房地产" value="fdc" />
                <el-option label="土地" value="td" />
                <el-option label="资产" value="zc" />
                <el-option label="租金" value="zj" />
              </el-select>
              <template slot="append">
                元
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="协议金额" prop="amountOfAgreement">
            <el-input v-model="reportCommonObj.amountOfAgreement">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="评估单价">
            <el-input v-model="reportCommonObj.reportUnitPrice">
              <template slot="append">元/㎡</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出具日期" prop="reportProvideTime">
            <el-date-picker
              v-model="reportCommonObj.reportProvideTime"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
              @change="reportProvideTimeChangeHandler"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始/结束时间" label-width="120px" prop="startAndEndTime">
            <el-date-picker
              v-model="reportCommonObj.startAndEndTime"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="startAndEndTimeChangeHandler"
            />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="建筑面积" prop="reportBuildingArea">
            <el-input v-model="reportCommonObj.reportBuildingArea">
              <template slot="append">平方米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="土地面积">
            <el-input v-model="reportCommonObj.reportLandArea">
              <template slot="append">平方米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宗地数">
            <el-input v-model="reportCommonObj.reportParcel">
              <template slot="append">宗</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产权人" prop="reportPropertyOwner">
            <el-input v-model="reportCommonObj.reportPropertyOwner" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="评估方法1" label-width="100px" prop="reportEvaluateMethodId1">
            <el-select v-model="reportCommonObj.reportEvaluateMethodId1" style="width: 100%" clearable filterable>
              <el-option v-for="item in noPageReportMethodList" :key="item.id" :value="item.id" :label="item.reportEvaluateMethodName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="评估方法2" label-width="100px">
            <el-select v-model="reportCommonObj.reportEvaluateMethodId2" style="width: 100%" clearable filterable>
              <el-option v-for="item in noPageReportMethodList" :key="item.id" :value="item.id" :label="item.reportEvaluateMethodName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="评估方法3" label-width="100px">
            <el-select v-model="reportCommonObj.reportEvaluateMethodId3" style="width: 100%" clearable filterable>
              <el-option v-for="item in noPageReportMethodList" :key="item.id" :value="item.id" :label="item.reportEvaluateMethodName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="评估方法4" label-width="100px">
            <el-select v-model="reportCommonObj.reportEvaluateMethodId4" style="width: 100%" clearable filterable>
              <el-option v-for="item in noPageReportMethodList" :key="item.id" :value="item.id" :label="item.reportEvaluateMethodName" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="估价员" prop="valueUserId">
            <el-select v-model="reportCommonObj.valueUserId" style="width: 100%" clearable filterable>
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签字估价师1" label-width="100px" prop="signUserId1">
            <el-select v-model="reportCommonObj.signUserId1" style="width: 90%" clearable filterable>
              <el-option v-for="item in noPageSignature" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签字估价师2" label-width="100px" prop="signUserId2">
            <el-select v-model="reportCommonObj.signUserId2" style="width: 90%" clearable filterable>
              <el-option v-for="item in noPageSignature" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已出预评编号" label-width="100px">
            <el-input v-model="reportCommonObj.beforehandEvaluation" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="业务人员" label-width="90px" prop="businessUserId">
            <el-select v-model="reportCommonObj.businessUserId" style="width: 100%" clearable filterable @change="selectUser" @clear="resetUser">
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="department">
            <el-select v-model="reportCommonObj.department" style="width: 100%">
              <el-option
                v-for="item in departments"
                :key="item.value1"
                :label="item.label1"
                :value="item.value1"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="组别" label-width="90px">
            <el-select v-model="reportCommonObj.tranches" style="width: 100%">
              <el-option
                v-for="item in tranchess"
                :key="item.value2"
                :label="item.label2"
                :value="item.value2"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="管理操作记录" label-width="100px">
            <el-input v-model="reportCommonObj.record" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="1">
          <el-form-item label-width="0px">
            <el-button type="primary" :disabled="reportCommonObj.reportTypeId !== '1'" @click="preToFormal">转正</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </div>
</template>

<script>
import { noPageMethod } from '@/api/init'
import { noPageUser } from '@/api/user'
import { noPageProject } from '@/api/init'
import { preparatoryToFormal, noPageAreaList, noPagePrefectureLeveLciTies } from '@/api/report'
import { mapGetters } from 'vuex'

export default {
  name: 'ReportInfo',
  props: {
    reportCommonObj: {
      reportName: '',
      type: Object,
      required: true
    },
    isAudit: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      noPageProjectList: [],
      noPageReportTypeList: [],
      noPageReportUseList: [],
      noPageReportObjectiveList: [],
      noPageReportMethodList: [],
      noPageReportUserList: [],
      noPageSignature: [],
      noPageReportAreas: [],
      noPageReportPrefectureLeveLciTies: [],
      noPageReportAreasFinal: [],
      noPageReportPrefectureLeveLciTiesFinal: [],

      startAndEndTime: '',
      valueTime: '',
      reportProvideTime: '',

      departments: [{
        value1: '数据信息部',
        label1: '数据信息部'
      }, {
        value1: '评估咨询部',
        label1: '评估咨询部'
      }, {
        value1: '总师室',
        label1: '总师室'
      }, {
        value1: '外地事业发展部',
        label1: '外地事业发展部'
      }, {
        value1: '行政部',
        label1: '行政部'
      }, {
        value1: '市场部',
        label1: '市场部'
      }, {
        value1: '资产评估事业部',
        label1: '资产评估事业部'
      }, {
        value1: '工程咨询部',
        label1: '工程咨询部'
      }, {
        value1: '总经理',
        label1: '总经理'
      }],
      value1: '',

      tranchess: [{
        value2: '数据业务组',
        label2: '数据业务组'
      }, {
        value2: '信息服务组',
        label2: '信息服务组'
      }, {
        value2: '评估组',
        label2: '评估组'
      }, {
        value2: '咨询组',
        label2: '咨询组'
      }, {
        value2: '市场一组',
        label2: '市场一组'
      }, {
        value2: '市场二组',
        label2: '市场二组'
      }],
      value2: ''
    }
  },

  created() {
    this.init()
  },

  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapGetters([
      'id'
    ])
  },

  methods: {
    init() {
      this.getNoPageList()
      this.isCreate()
    },

    getNoPageList() {
      this.getNoPageMethodList()
      this.getNoPageUserList()
      this.getNoPageProjectList()
      this.getNoPageAreaList()
      this.getNoPagePrefectureLeveLciTies()
    },

    getNoPageAreaList() {
      noPageAreaList().then(res => {
        this.noPageReportAreasFinal = res.data.list
        this.noPageReportAreas = res.data.list
      })
    },

    getNoPagePrefectureLeveLciTies() {
      noPagePrefectureLeveLciTies().then(res => {
        this.noPageReportPrefectureLeveLciTiesFinal = res.data.list
        this.noPageReportPrefectureLeveLciTies = res.data.list
      })
    },

    getNoPageMethodList() {
      noPageMethod().then(res => {
        this.noPageReportMethodList = res.data.methods
      })
    },

    getNoPageUserList() {
      noPageUser().then(res => {
        this.noPageReportUserList = res.data.users
        this.noPageSignature = this.noPageReportUserList.filter(item => item.id === '1514497650193797121' || item.id === '1502197606761553921' || item.id === '1502197806955683841' || item.id === '1502197899352006658' || item.id === '1508298718535143425' || item.id === '1508299505017475074' || item.id === '1508299594242904066' || item.id === '1508298870004043778' || item.id === '1508298960420655105' || item.id === '1508299055350337537' || item.id === '1508300308801310722')
      })
    },

    getNoPageProjectList() {
      noPageProject().then(res => {
        const data = res.data
        this.noPageProjectList = data.projects
        this.noPageReportObjectiveList = data.objectives
        this.noPageReportTypeList = data.types
        this.noPageReportUseList = data.uses
      })
    },

    getReportCommonInfo() {

    },
    calculatePayHandler(val) {
      this.reportCommonObj.chargeGist = val
    },
    startAndEndTimeChangeHandler(val) {
      this.startAndEndTime = val
      this.reportCommonObj.startAndEndTime = val
    },

    valueTimeChangeHandler(val) {
      this.reportCommonObj.reportEvaluateTime = val
    },

    reportProvideTimeChangeHandler(val) {
      this.reportCommonObj.reportProvideTime = val
    },

    toCreate() {
      const id = this.$route.query.id
      this.$router.push({ path: '/report/create/real-estate', query: { id: id }})
    },

    preToFormal() {
      const id = this.$route.query.id
      const id1 = this.id
      this.$confirm('该操作会进行报告类型的转换，确认执行吗？', '预评转正式', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        preparatoryToFormal(id, id1).then(res => {
          this.$message.success(res.message)
          this.$router.go(0)
        })
      })
    },

    isCreate() {
      const id = this.$store.getters.id
      if (this.reportCommonObj.valueUserId + '' === id + '') {
        this.updateReportId = false
      }
    },

    selectArea(val) {
      this.noPageReportPrefectureLeveLciTiesFinal = this.noPageReportPrefectureLeveLciTies.filter(item => item.prefectureLevelCitiesName === val)
      this.noPageReportAreas = this.noPageReportAreasFinal.filter(item => item.parentLevel === this.noPageReportPrefectureLeveLciTiesFinal[0].id)
    },
    resetArea(val) {
      this.noPageReportAreas = this.noPageReportAreasFinal
    },
    selectUser(val) {
      var user1 = this.noPageReportUserList.filter(item => item.id === val)
      this.reportCommonObj.department = user1[0].department
      this.reportCommonObj.tranches = user1[0].tranches
    },
    resetUser(val) {
      this.reportCommonObj.department = null
      this.reportCommonObj.tranches = null
    }

  }
}
</script>

<style scoped>

</style>
